<template>
	<view>
		<u-swiper v-if="item.images" height="500" :list="item.images" :video="item.video" img-mode="aspectFit">
		</u-swiper>
		<view class="detail">
			<view class="title-1">确认行程</view>
			<view class="flex-between">
				<view class="title">
					{{platform.name}}
				</view>
				<view class="flex" @click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + item.user_id)">
					<u-avatar size="42" :src="userInfo.avatar"></u-avatar>
					<view class="name">
						{{userInfo.nickname}}
					</view>
				</view>
			</view>
			<view class="address">
				{{item.start[0].name}}-{{item.end[0].name}}
			</view>
			<view class="cell">
				<view class="text-1">
					行程出发时间(不可修改)
				</view>
				<view class="text-2">
					{{item.start_date}}-{{item.start_time}}
				</view>
			</view>
			<view class="cell">
				<view class="text-1">
					上车地点
				</view>
				<view class="text-2" @click="locationShow_1 = true">
					<text class="pr-20">{{start.name}}</text>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<block v-if="shenheSwitch=='0'">
				<view class="cell">
					<view class="text-1">
						上车地点备注
					</view>
					<u-input v-model="start_bz" height="30" inputAlign="right" :placeholder="scdd"></u-input>
				</view>
			</block>
			<view class="cell">
				<view class="text-1">
					下车地点
				</view>
				<view class="text-2" @click="locationShow_2 = true">
					<text class="pr-20">{{end.name}}</text>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<block v-if="shenheSwitch=='0'">
				<view class="cell">
					<view class="text-1">
						下车地点备注
					</view>
					<u-input v-model="end_bz" height="30" inputAlign="right" :placeholder="xcdd"></u-input>
				</view>
			</block>
		</view>
		<block v-if="shenheSwitch=='0'">
			<view class="order-info">
				<!-- 可选座位 end -->
				<view class="list">
					<view class="cell" @click="addUser">
						<view class="text-1">
							乘车人
						</view>
						<view class="text-2">
							<text class="pr-20">请选择</text>
							<u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
					</view>
					<view class="passenger" v-if="passenger.length>0">
						<view class="item" v-for="(item,i) in passenger" :key="item.id">
							<view class="flex flex-1">
								<text class="name">{{item.name}}</text>
								<text class="id">{{item.id_num | idNum}}</text>
							</view>
							<u-icon size="40" @click="delPassenger(i)" name="minus-circle" color="#519D76"></u-icon>
						</view>
					</view>
					<view class="title-1" v-if="item.zwtp">
						可选座位
					</view>
					<block v-if="item.zwtp">
						<view class="seat-wrap" v-if="item.car.seat_num == 4 || item.car.seat_num == 5">
							<image v-if="item.zwtp" class="car-pic" :src="item.zwtp" mode="widthFix"></image>
							<u-checkbox-group @change="getSeat" :max="passengerNum">
								<view v-for="(_item, index) in item.szdx" :key="index">
									<u-checkbox v-model="_item.checked" :disabled="_item.disabled" :name="index">
										<!-- {{_item.name}} -->
										<view class="seat-img"
											:class="['seat-'+_item.id,_item.checked?'checked':'check',_item.disabled?'checked':'check']">
											<view class="seat">
												<image v-if="_item.disabled" src="@/static/seat_3.png" mode="widthFix">
												</image>
												<image v-else-if="_item.checked" src="https://longzhiyue-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20221008/e5d9000bd3bb13efdbdf28f0b91211e3.png"
													mode="widthFix">
												</image>
											</view>
										</view>
									</u-checkbox>
								</view>
							</u-checkbox-group>
						</view>
						<view class="seat-wrap-1" v-if="item.car.seat_num == 7">
							<image class="car-pic" :src="item.zwtp" mode="widthFix"></image>
							<u-checkbox-group @change="getSeat" :max="passengerNum">
								<view v-for="(_item, index) in item.szdx" :key="index">
									<u-checkbox v-model="_item.checked" :disabled="_item.disabled" :name="index">
										<!-- {{_item.name}} -->
										<view class="seat-img"
											:class="['seat-'+_item.id,_item.checked?'checked':'check',_item.disabled?'checked':'check']">
											<view class="seat">
												<image v-if="_item.disabled" src="@/static/seat_3.png" mode="widthFix">
												</image>
												<image v-else-if="_item.checked" src="https://longzhiyue-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20221008/e5d9000bd3bb13efdbdf28f0b91211e3.png"
													mode="widthFix">
												</image>
											</view>
										</view>
									</u-checkbox>
								</view>
							</u-checkbox-group>
						</view>
					</block>
					<view class="cell">
						<view class="text-1">
							开具发票
						</view>
						<view class="text-2">
							<u-radio-group v-model="invoiceValue">
								<u-radio @change="pickerInvoice" v-for="(item, index) in invoiceList" :key="index"
									:name="item.value" activeColor="#519D76">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="cell" v-if="invoiceValue==1">
						<view class="text-1">
							发票抬头
						</view>
						<view class="text-2" @click="$tools.to('/pages_message/myFp/myFp')">
							<text class="pr-20">{{fp_name || '请选择'}}</text>
							<u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
					</view>
					<!-- 保险 -->
					<view class="bx" @click="pickerBx">
						<view class="flex-1">
							<view class="title">
								{{bxInfo.bxmc}}
							</view>
							<view class="text flex" @click="$tools.to('/pages/agreement/agreement?key=bxsm')">
								<text class="pr-10">{{bxInfo.bxms}}</text>
								<u-icon name="question-circle" color="#999"></u-icon>
							</view>
						</view>
						<view class="flex">
							<view class="price">
								￥{{bxInfo.bxje}}
							</view>
							<text class="pr-20">/人</text>
							<image class="check" v-if="is_bx==1" src="../../static/btn_checked.png" mode=""></image>
							<image class="check" v-else src="../../static/btn_check.png" mode=""></image>
						</view>
					</view>
					<view class="cell">
						<view class="text-1">
							小费
						</view>
						<view class="">
							<u-radio-group v-model="xf">
								<u-radio @change="pickerXf" v-for="(_item, index) in scxfList" :key="index"
									:name="_item.money" activeColor="#519D76">
									<view class="flex">
										<view class="custom-input" v-if="_item.money=='0'">
											<block v-if="!custom_xf_flag">{{custom_xf}}</block>
											<u-input v-else v-model="custom_xf" type="number" :disabled="xf!=0"
												inputAlign="center" height="52" placeholder="请输入"></u-input>
										</view>
										{{_item.name}}
									</view>
								</u-radio>
							</u-radio-group>
						</view>
						<!-- <u-input type="digit" v-model="xf" height="30" inputAlign="right" placeholder="支持一下车主"></u-input> -->
					</view>
					<view class="cell">
						<view class="text-1">
							备注
						</view>
					</view>
					<u-input v-model="remark" type="textarea" placeholder="无备注"></u-input>
				</view>
			</view>
			<view class="payment">
				<!-- <view class="title-1">支付</view>
			<view class="list">
				<radio-group @change="selectPayType">
					<label class="cell flex-between" v-for="(item, index) in list" :key="index">
						<image class="icon-58" :src="item.icon" mode="widthFix"></image>
						<view class="flex-1 text-1">{{item.name}}</view>
						<view>
							<radio color="#519D76" :value="item.value" :checked="item.value === current" />
						</view>
					</label>
				</radio-group>
			</view> -->
			</view>
			<view class="btn-fixed">
				<view class="text-1" @click="priceShow = true">
					拼车费用：<text class="pr-20">¥{{money}}</text>
					<u-icon name="arrow-up" size="30" color="#ccc"></u-icon>
				</view>
				<view class="btn" @click="payment">
					立即支付
				</view>
			</view>
		</block>
		<u-select v-model="locationShow_1" label-name="name" value-name="value" :list="locationList_start"
			@confirm="pickerLocation_1"></u-select>
		<u-select v-model="locationShow_2" label-name="name" value-name="value" :list="locationList_end"
			@confirm="pickerLocation_2"></u-select>
		<u-select v-model="invoiceShow" :list="invoiceList" @confirm="pickerInvoice"></u-select>
		<n-popup ref="paymentSuccessShow"
			icon="https://longzhiyue-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220822/8bf61cc40244d6382eef4c6084504d87.png"
			title="支付成功" desc="请等待车主确认，将通过系统消息通知您" @confirm="confirm"></n-popup>

		<u-popup v-model="priceShow" borderRadius="20" :closeable="true" mode="bottom">
			<view class="price-popup">
				<view class="title-1">
					金额明细
				</view>
				<view class="info">
					<view class="item" v-if="is_bx">
						<view class="title">
							{{bxInfo.bxmc}}
						</view>
						<view class="text">
							<view>￥{{bxInfo.bxje}}</view>
							<view class="pl-40">
								x{{passengerNum}}人
							</view>
						</view>
					</view>
					<view class="item">
						<view class="title">
							小费
						</view>
						<view class="text">
							￥{{xf || 0}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							车费
						</view>
						<view class="text">
							￥{{item.price}}
							<view class="pl-40">
								x{{passengerNum}}人
							</view>
						</view>
					</view>
				</view>
				<view class="btn-group">
					<view class="text-1" @click="priceShow = false">
						拼车费用：<text class="pr-20">¥{{money}}</text>
						<u-icon name="arrow-down" size="30" color="#ccc"></u-icon>
					</view>
					<view class="btn" @click="payment">
						立即支付
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		platform
	} from '@/config/index.js'
	export default {
		data() {
			return {
				platform,
				priceShow: false,
				id: '',
				item: '',
				locationShow_1: false,
				locationShow_2: false,
				locationList: [],
				locationList_start: [],
				locationList_end: [],
				list: [{
						name: '微信支付',
						value: 'wechat_pay',
						icon: require('../../static/icon_wechatpay.png')
					},
					{
						name: '支付宝支付',
						value: 'ali_pay',
						icon: require('../../static/icon_alipay.png')
					},
				],
				invoiceList: [{
						name: '本次不开具发票',
						value: '0'
					},
					{
						name: '开具发票',
						value: '1'
					}
				],
				invoiceShow: false,
				invoiceValue: 0,
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				current: 'wechat_pay',
				paymentSuccessShow: false,
				start: '',
				end: '',
				remark: '',
				soure: '', // 页面来源 默认：首页行程 1:行程直播间
				passenger: [],
				wz: [],
				money: 0, //总金额
				passengerNum: 0, // 人数
				start_bz: '',
				end_bz: '',
				fp_id: '', //	发票id
				fp_name: '', //	发票抬头
				bx: 0, //保险金额
				cf: 0, //车费
				xf: '', //小费
				custom_xf: 0,
				custom_xf_flag: false,
				bxInfo: null, //保险信息
				is_bx: 0, //是否购买保险
				scdd: '', //scdd: "请填写上车地点备注"
				xcdd: '', //xcdd: "请填写下车地点备注"
				scxfList: [], //行程消费
			};
		},
		computed: {
			...mapState({
				userInfo: (state) => state.user.userInfo,
				shenheSwitch: state => state.config.shenheSwitch
			}),
		},
		onLoad(e) {
			this.id = e.id
			this.soure = e.soure
			this.getJourneyDetail()
			this.getBx()
		},
		watch: {
			passenger: function(val) {
				this.cf = val.length * this.item.price
				if (this.is_bx == 1) {
					this.bx = val.length * parseFloat(this.bxInfo.bxje)
				} else {
					this.bx = 0
				}
				console.log('this.is_bx', this.is_bx)
				console.log('this.bx', this.bx)
				this.money = this.cf + this.bx + parseFloat(this.xf || 0) + parseFloat(this.custom_xf || 0)
				this.money = this.money.toFixed(2)
			},
			// xf: function(val) {
			// 	if (!this.custom_xf_flag) {
			// 		this.cf = this.passenger.length * this.item.price
			// 		if (this.is_bx) {
			// 			this.bx = this.passenger.length * parseFloat(this.bxInfo.bxje)
			// 		} else {
			// 			this.bx = 0
			// 		}
			// 		this.money = this.cf + this.bx + parseFloat(val || 0)
			// 		this.money = this.money.toFixed(2)
			// 	}
			// },
			custom_xf: function(val) {
				if (this.custom_xf_flag) {
					this.cf = this.passenger.length * this.item.price
					if (this.is_bx) {
						this.bx = this.passenger.length * parseFloat(this.bxInfo.bxje)
					} else {
						this.bx = 0
					}
					this.money = this.cf + this.bx + parseFloat(val || 0)
					this.money = this.money.toFixed(2)
				}

			},
			is_bx: function(val) {
				this.cf = this.passenger.length * this.item.price
				if (val) {
					this.bx = this.passenger.length * parseFloat(this.bxInfo.bxje)
				} else {
					this.bx = 0
				}
				this.money = this.cf + this.bx + parseFloat(this.xf || 0) + parseFloat(this.custom_xf || 0)
				this.money = this.money.toFixed(2)
			},
		},
		methods: {
			getBx() {
				this.$api.getConfig({
					name: 'bxje'
				}).then(res => {
					if (res.code == 1) {
						this.bxInfo = res.data
					}
				})
				this.$api.getConfig({
					name: 'scdd'
				}).then(res => {
					if (res.code == 1) {
						this.scdd = res.data.scdd
						this.xcdd = res.data.xcdd
					}
				})
			},
			getJourneyDetail() {
				this.$api.journeyDetail({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.item = res.data
						this.is_bx = res.data.is_bx
						this.start = res.data.start[0]
						this.end = res.data.end[0]

						this.scxfList = res.data.xf
						this.scxfList.push({
							name: '元',
							value: '0',
							money: '0',
						})

						let locationList = []
						this.locationList = []
						locationList.unshift(...res.data.start)
						locationList.push(...res.data.way)
						locationList.push(...res.data.end)
						locationList.forEach((item, i) => {
							this.locationList.push({
								...item,
								value: item
							})
						})
						console.log(this.locationList)
						this.locationList_start = this.locationList.slice(0, this.locationList.length - 1)
						this.locationList_end = this.locationList.slice(1, this.locationList.length)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 选择支付类型
			selectPayType(e) {
				console.log(e)
				this.current = e.detail.value
			},
			// 选择上车地点
			pickerLocation_1(e) {
				console.log(e)
				this.start = e[0].value
				this.locationList.forEach((item, i) => {
					if (item.name == e[0].label) {
						this.locationList_end = this.locationList.slice(i + 1)
					}
				})
			},
			// 选择下车地点
			pickerLocation_2(e) {
				console.log(e)
				this.end = e[0].value
				this.locationList.forEach((item, i) => {
					if (item.name == e[0].label) {
						this.locationList_start = this.locationList.slice(0, i)
					}
				})
			},
			// 是否开发票
			pickerInvoice(e) {
				console.log(e)
				this.invoiceValue = e
				// if (this.invoiceValue == 1) {
				// 	uni.navigateTo({
				// 		url: '/pages_message/myFp/myFp'
				// 	})
				// }
			},
			// 添加乘车人
			addUser() {
				uni.navigateTo({
					url: '../addPassenger/addPassenger'
				})
			},
			// 删除乘客
			delPassenger(i) {
				this.passenger.splice(i, 1)
				this.wz.splice(0, 1)
				this.passengerNum--
				this.item.szdx.some((item, i) => {
					if (item.checked == true) {
						this.item.szdx[i].checked = false
						console.log('---------')
						console.log(this.item.szdx[i])
						return true
					}
				})
			},
			getSeat(e) {
				uni.vibrateLong()
				console.log(e)
				console.log(this.item.szdx)
				this.wz = e
			},
			// 是否购买保险
			pickerBx() {
				console.log(this.item.is_bx)
				if (this.item.is_bx == 0) {
					this.is_bx = this.is_bx == 0 ? 1 : 0
				}
				console.log(this.is_bx)
			},
			// 选择小费
			pickerXf(e) {
				if (e == 0) {
					this.custom_xf_flag = true
					this.xf = ''
					this.custom_xf = 0

					this.cf = this.passenger.length * this.item.price
					if (this.is_bx) {
						this.bx = this.passenger.length * parseFloat(this.bxInfo.bxje)
					} else {
						this.bx = 0
					}
					this.money = this.cf + this.bx + parseFloat(this.custom_xf || 0)
					this.money = this.money.toFixed(2)

				} else {
					this.custom_xf_flag = false
					this.custom_xf = 0
					this.xf = e

					this.cf = this.passenger.length * this.item.price
					if (this.is_bx) {
						this.bx = this.passenger.length * parseFloat(this.bxInfo.bxje)
					} else {
						this.bx = 0
					}
					this.money = this.cf + this.bx + parseFloat(this.xf || 0)
					this.money = this.money.toFixed(2)

				}
				console.log(this.custom_xf_flag)
			},
			// 支付
			payment() {
				let xf = ''
				if (this.custom_xf_flag) {
					xf = this.custom_xf || 0
				} else {
					xf = this.xf
				}
				console.log(xf)
				// if(this.item.type!=2){
				// 	if(this.item.car.seat_num<=7){
				// 		if (this.passenger.length > this.wz.length || this.wz.length == 0) {
				// 			this.$tools.toast('请选择座位')
				// 			return
				// 		}
				// 	}
				// }

				let start = [{
					latitude: this.start.latitude,
					longitude: this.start.longitude,
					name: this.start.name,
				}]
				let end = [{
					latitude: this.end.latitude,
					longitude: this.end.longitude,
					name: this.end.name,
				}]

				let passenger_id = []
				this.passenger.forEach(item => {
					passenger_id.push(item.id)
				})

				let wz = []
				this.wz.forEach(item => {
					wz.push(this.item.szdx[item].id)
				})

				console.log(this.cf)
				console.log(this.bx)
				console.log(this.xf)
				this.$api.journeyCreateOrder({
					start_bz: this.start_bz,
					end_bz: this.end_bz,
					itinerary_id: this.id,
					start: JSON.stringify(start),
					end: JSON.stringify(end),
					is_invoice: this.invoiceValue,
					remarks: this.remark,
					order_type: 1,
					money: this.money,
					passenger_id: passenger_id.toString(),
					wz: wz.toString(),
					szdx: JSON.stringify(this.item.szdx),
					wznum: this.passenger.length,
					fp_id: this.fp_id,
					xf: xf,
					bx: this.bx,
					cf: this.cf
				}).then(res => {
					if (res.code == 1) {
						// #ifdef APP-PLUS || H5
						// app支付宝支付
						this.$api.payAlipay({
							order_id: res.data.order_id
						}).then(orderInfo => {
							this.$tools.appAlipay(orderInfo.data).then(payInfo => {
								if (payInfo.errMsg == 'requestPayment:ok') {
									this.$refs.paymentSuccessShow.show = true
								} else {
									this.$tools.toast('支付失败')
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages_user/my_appointment/my_appointment'
										})
									}, 1000)
								}
							})
						})
						// #endif
						// #ifdef MP-WEIXIN
						this.$api.payMinipay({
							order_id: res.data.order_id
						}).then(orderInfo => {
							this.$tools.wechatMpPay(orderInfo.data).then(payInfo => {
								if (payInfo.errMsg == 'requestPayment:ok') {
									this.$refs.paymentSuccessShow.show = true
								} else {
									this.$tools.toast('支付失败')
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages_user/my_appointment/my_appointment'
										})
									}, 1000)
								}
							})
						})
						// #endif
					} else {
						this.$tools.toast(res.msg)
					}
				})

			},
			confirm() {
				this.$refs.paymentSuccessShow.show = false
				uni.switchTab({
					url: '../userCenter/userCenter'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.detail {
		padding: 0 30upx;
		background: #fff;
		line-height: 1;

		.title-1 {
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			padding: 40upx 0;
		}

		.title {
			font-size: 30upx;
			font-weight: bold;
			color: #519D76;
		}

		.name {
			margin-left: 8upx;
			font-size: 24upx;
			color: #333333;
		}

		.address {
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			margin: 30upx 0;
		}

		.cell {
			border-top: 1upx solid #EFEFEF;
			padding: 40upx 0;
			@include flex-between;

			.text-1 {
				font-size: 28upx;
				font-weight: bold;
				color: #999999;
				white-space: nowrap;
				padding-right: 30upx;
			}

			.text-2 {
				font-size: 30upx;
				font-weight: bold;
				color: #141414;
				@include flex;
			}
		}

	}

	.passenger {
		margin-bottom: 40upx;

		.item {
			@include flex;
			margin-bottom: 30upx;

			.name {
				font-size: 30upx;
				font-weight: bold;
				color: #141414;
				min-width: 160upx;
			}

			.id {
				font-size: 26upx;
				color: #999999;
				margin-left: 30upx;
			}
		}
	}

	.order-info {
		background: #fff;
		margin-top: 16upx;
		padding: 0 30upx;

		.title-1 {
			font-size: 26upx;
			font-weight: bold;
			color: #333333;
			padding: 40upx 0 30upx;
		}

		image {
			width: 447upx;
			display: block;
			margin: 0 auto;
		}

		.cell:not(:first-child) {
			border-top: 1upx solid #EFEFEF;
		}

		.cell {
			padding: 26upx 0;
			@include flex-between;

			.text-1 {
				font-size: 28upx;
				font-weight: bold;
				color: #999999;
			}

			.text-2 {
				font-size: 30upx;
				font-weight: bold;
				color: #141414;
				@include flex;
			}
		}
	}

	.payment {
		background: #fff;
		padding: 0 30upx 120upx;
		margin-top: 16upx;

		.title-1 {
			font-size: 28upx;
			font-weight: bold;
			color: #519D76;
			padding: 40upx 0;
		}

		.cell {
			padding: 34upx 0;
			border-top: 1upx solid #EFEFEF;
			@include flex-between;

			.text-1 {
				font-size: 30upx;
				font-weight: bold;
				color: #141414;
				padding-left: 20upx;
			}
		}
	}

	.btn-fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10000;
		background: #fff;
		padding: 20upx 30upx;
		@include flex-between;
		border-top: 1upx solid #f5f5f5;

		.text-1 {
			font-size: 26upx;
			font-weight: bold;
			color: #999999;

			text {
				font-size: 40upx;
				font-weight: bold;
				color: #328B5A;
				margin-left: 10upx;
			}
		}

		.btn {
			text-align: center;
			font-size: 30upx;
			font-weight: 500;
			color: #FFFFFF;
			width: 300upx;
			line-height: 80upx;
			background: #519D76;
			border-radius: 40upx;
		}
	}

	.pop {
		width: 580upx;
		height: 680upx;
		background: linear-gradient(180deg, #EEFFF6 0%, #FFFFFF 100%);
		box-shadow: 0px 6upx 12upx rgba(153, 153, 153, 0.8);
		text-align: center;

		image {
			width: 364upx;
			margin: 92upx auto 0;
		}

		.title {
			font-size: 28upx;
			line-height: 42upx;
			color: #333333;
		}

		.n-btn-primary {
			margin-top: 74upx;
		}
	}

	.bx {
		border-top: 1upx solid #EFEFEF;
		padding: 30upx 0;
		@include flex;

		.check {
			width: 40upx;
			height: 40upx;
		}

		.text {
			font-size: 24upx;
			color: #999;
			margin-top: 8upx;
		}
	}

	.price-popup {
		.btn-group {
			padding: 20upx 30upx;
			@include flex-between;
			border-top: 1upx solid #f5f5f5;

			.text-1 {
				font-size: 26upx;
				font-weight: bold;
				color: #999999;

				text {
					font-size: 40upx;
					font-weight: bold;
					color: #328B5A;
					margin-left: 10upx;
				}
			}

			.btn {
				text-align: center;
				font-size: 30upx;
				font-weight: 500;
				color: #FFFFFF;
				width: 300upx;
				line-height: 80upx;
				background: #519D76;
				border-radius: 40upx;
			}
		}
	}

	.price-popup {
		padding: 30upx;

		.title-1 {
			text-align: center;
			font-size: 30upx;
			font-weight: 500;
		}

		.btn-group {
			padding: 20upx 0;
		}

		.info {
			.item {
				@include flex-between;
				padding: 20upx 0;
			}

			.title {
				font-size: 28upx;
				color: #333;
			}

			.text {
				font-size: 28upx;
				color: #999;
				@include flex;
			}

		}
	}

	// .car-pic{
	// 	width: 690upx;
	// 	height: 690upx;
	// }
	.seat-wrap {
		position: relative;


		.seat {
			position: relative;

			image {
				width: 50upx;
				height: 28upx;
				margin-bottom: 20upx;
			}
		}

		.check {
			border: 4upx dashed rgba(81, 157, 118, .7);
		}

		.checked {
			border: 4upx solid red;
		}

		.seat-img {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 18upx;
		}

		// 五座
		.seat-1 {
			position: absolute;
			right: 266upx;
			top: 266upx;
			z-index: 1000;
			width: 60upx;
			height: 80upx;
			// background: rgba(0,0,0,.5);
		}

		.seat-5 {
			position: absolute;
			left: 270upx;
			top: 360upx;
			z-index: 1000;
			width: 60upx;
			height: 80upx;
			// background: rgba(0,0,0,.5);
		}

		.seat-6 {
			position: absolute;
			left: 332upx;
			top: 360upx;
			z-index: 1100;
			width: 30upx;
			height: 80upx;
			// background: rgba(0,0,0,.5);
		}

		.seat-7 {
			position: absolute;
			right: 266upx;
			top: 360upx;
			z-index: 1000;
			width: 60upx;
			height: 80upx;
			// background: rgba(0,0,0,.5);
		}
	}

	.seat-wrap-1 {
		position: relative;

		.seat {
			position: relative;

			image {
				width: 50upx;
				height: 28upx;
				margin-bottom: 20upx;
			}
		}

		.check {
			border: 4upx dashed rgba(81, 157, 118, .7);
		}

		.checked {
			border: 4upx solid red;
		}

		.seat-img {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 18upx;
		}

		// 七座
		.seat-1 {
			position: absolute;
			right: 266upx;
			top: 210upx;
			z-index: 1000;
			width: 60upx;
			height: 80upx;
			// background: rgba(0,0,0,.5);
		}

		.seat-2 {
			position: absolute;
			left: 270upx;
			top: 310upx;
			z-index: 1000;
			width: 60upx;
			height: 80upx;
			// background: rgba(0,0,0,.5);
		}

		.seat-3 {
			position: absolute;
			left: 332upx;
			top: 310upx;
			z-index: 1000;
			width: 30upx;
			height: 80upx;
			// background: rgba(0,0,0,.5);
		}

		.seat-4 {
			position: absolute;
			right: 266upx;
			top: 310upx;
			z-index: 1000;
			width: 60upx;
			height: 80upx;
			// background: rgba(0,0,0,.5);
		}

		.seat-5 {
			position: absolute;
			left: 270upx;
			top: 410upx;
			z-index: 1000;
			width: 60upx;
			height: 80upx;
			// background: rgba(0,0,0,.5);
		}

		.seat-6 {
			position: absolute;
			left: 332upx;
			top: 410upx;
			z-index: 1000;
			width: 30upx;
			height: 80upx;
			// background: rgba(0,0,0,.5);
		}

		.seat-7 {
			position: absolute;
			right: 266upx;
			top: 410upx;
			z-index: 1000;
			width: 60upx;
			height: 80upx;
			// background: rgba(0,0,0,.5);
		}
	}

	.custom-input {
		width: 100upx;
		@include flex-center;
	}

	/deep/.u-checkbox__icon-wrap {
		display: none !important;
	}
</style>
